<template>
  <div class="scale_control" v-drag>
    <!-- <el-select class="select_box" @change="scaleChange" :value="scale" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>-->
    <div class="item scale-area">
      <i @click="scaleShort" title="缩小" class="icon iconfont icon-minus"></i>
      <span class="scale-num">
        <input
          @blur="inputChange($event)"
          oninput="value=value.replace(/[^\d]/g,'')"
          :value="scale"
        />%
      </span>
      <!-- <p >{{scale}}</p> -->
      <i title="放大" @click="scaleAdd" class="icon iconfont icon-plus"></i>
      <el-button class="reset_icon" @click="scaleReset" type="text">自适应</el-button>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'scaleControl',
    props: {},
    components: {},
    data() {
      return {
        scale: 0,
        options: [
          {
            value: 2,
            label: '200%',
          },
          {
            value: 1.5,
            label: '150%',
          },
          {
            value: 1,
            label: '100%',
          },
          {
            value: 0.5,
            label: '50%',
          },
          {
            value: -1,
            label: '自适应',
          },
        ],
      };
    },
    computed: {
      ...mapGetters(['pageScale', 'pageSize']),
    },
    created() {
      this.scale = Number((this.pageScale * 100).toFixed(0));
    },
    mounted() {},
    methods: {
      scaleShort() {
        this.scale = Number(this.scale) - 1 >= 10 ? Number(this.scale) - 1 : 10;
        this.$store.commit('SET_PAGESCALE', this.scale / 100);
      },
      scaleAdd() {
        this.scale = Number(this.scale) + 1;
        this.$store.commit('SET_PAGESCALE', this.scale / 100);
      },
      inputChange(e) {
        let scale = e.target.value >= 10 ? e.target.value : 10;
        this.scale = scale;
        this.$store.commit('SET_PAGESCALE', scale / 100);
      },
      scaleReset(val) {
        return this.$emit('fitScale');
      },
    },
    watch: {
      pageScale: {
        handler(val) {
          this.scale = (this.pageScale * 100).toFixed(0);
        },
      },
    },
    filters: {},
  };
</script>

<style scoped lang="scss">
  .scale_control {
    height: 40px;
    display: inline-block;
    position: absolute;
    right: 30px;
    bottom: 30px;
    padding: 5px 20px;
    background-color: rgba(37, 83, 103, 0.8);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    .scale-area {
      display: flex;
      align-items: center;
      height: 36px;
      justify-content: space-between;
      font-size: 16px;
      .scale-num {
        margin: 0 15px;
        display: flex;
        align-items: center;
        input {
          width: 60px;
          background-color: transparent !important;
          border: 1px solid $text-grey !important;
          text-align: center;
          height: 28px;
          border-radius: 4px;
          color: $text-primary;
          margin-right: 5px;
          &:hover {
            border: 1px solid #13c0d5 !important;
          }
        }
      }
      i {
        font-size: 20px;
        cursor: pointer;
      }
      .reset_icon {
        font-size: 14px;
        margin-left: 20px;
        color: $text-primary;
        &:hover {
          color: #13c0d5;
        }
      }
    }
  }
</style>
